<script setup>
import { ref, defineOptions, computed } from "vue";
import searcher from "../json/searcher.json";

defineOptions({
  name: "searcherCom",
});
let searcherList = ref({ ...searcher.searcher.searchEngine });
console.log(searcherList, "全量数据");

let currentSearchType = ref({});
let currentSearchTypeId = ref("");
let currentSearchTypeTag = ref("");
let isShowSearchType = ref(false);
let allScaleSize = ref("1");
let isShowSearchHistory = ref(false);
let searchHistoryList = ref([]);
let searchQuery = ref("");

currentSearchType.value = searcherList.value.current;
currentSearchTypeId.value = searcherList.value.current.uuid;
currentSearchTypeTag.value = searcherList.value.current.types[0];

// 判断本地是否存在搜索记录
if (localStorage.getItem("uv_9527_search_history")) {
  searchHistoryList.value = JSON.parse(localStorage.getItem("uv_9527_search_history"));
}

function handleSearchHistoryFn() {
  if(!searchQuery.value)return;
  if (searchHistoryList.value.length > 0) {
    if (searchHistoryList.value.length >= 10) {
      searchHistoryList.value =searchHistoryList.value.slice(0,9);
      searchHistoryList.value.unshift(searchQuery.value);
    } else {
      searchHistoryList.value.unshift(searchQuery.value);
    }
  } else {
    searchHistoryList.value.push(searchQuery.value);
  }
  localStorage.setItem('uv_9527_search_history',JSON.stringify(searchHistoryList.value))
}

function goToSearch() {
  isShowSearchType.value = false;
  handleSearchHistoryFn();
  if (true) {
    window.open(currentSearchTypeTag.value.url + encodeURIComponent(searchQuery.value));
  } else {
    window.location.href =
      currentSearchTypeTag.value.url + encodeURIComponent(searchQuery.value);
  }
  searchQuery.value = '';
  isShowSearchHistory.value = false;
}
function toSetCurrentSearchType(data) {
  console.log(data);
  currentSearchTypeTag.value = data;
  isShowSearchType.value = false;
}

function toOpenSelType() {
  isShowSearchType.value = true;
}

function toChangeSearchType(data) {
  currentSearchType.value = data;
  currentSearchTypeId.value = data.uuid;
  currentSearchTypeTag.value = currentSearchType.value.types[0];
  isShowSearchType.value = false;
}
function focusInputFn(e) {
  console.log(e);
  isShowSearchType.value = false;
  isShowSearchHistory.value = true;
}
function blurInputFn() {
  setTimeout(()=>{
    isShowSearchHistory.value = false;
  },100)
}
function toDeleteOneHis(){

}
function deleteAllHistory(){
  searchHistoryList.value = []
  localStorage.setItem('uv_9527_search_history',JSON.stringify(searchHistoryList.value))
}
function toSetCurrentSearch(data){
  searchQuery.value = data;
 isShowSearchHistory.value = false;

}
document.addEventListener("click", () => {
  isShowSearchType.value = false;
});
</script>
<template>
  <div class="tablist-search-wrapper">
    <div :style="`transform: scale(${allScaleSize})`">
      <div class="search-type-list">
        <p
          v-for="(item, index) in currentSearchType.types"
          :key="index"
          @click="toSetCurrentSearchType(item)"
          :class="currentSearchTypeTag.name === item.name ? 'active-cur-tag' : ''"
        >
          {{ item.name }}
        </p>
      </div>
      <div class="search">
        <div class="option-item-search">
          <img
            class="current-search-type"
            :src="currentSearchType.logo"
            alt=""
            @click.stop="toOpenSelType"
          />
          <ul v-if="isShowSearchType" class="glass-effect-f search-type-list-box">
            <li
              v-for="(item, index) in searcherList.all"
              :key="index"
              @click="toChangeSearchType(item)"
            >
              <img :src="item.logo" alt="" />
              <p>{{ item.name }}</p>
            </li>
          </ul>
        </div>
        <div class="input-search">
          <el-input
            placeholder="请输入搜索内容"
            v-model="searchQuery"
            @keydown.enter="goToSearch"
            @focus.stop="focusInputFn"
            @blur="blurInputFn"
          ></el-input>
          <div class="glass-effect-f search-history-box" v-if="isShowSearchHistory">
            <ul class="search-history-list">
              <li
                class="search-history-item"
                v-for="(item, index) in searchHistoryList"
                :key="index"
                @click="toSetCurrentSearch(item)"
              >
               <span>{{ item }}</span> 
              <span @click="toDeleteOneHis">
                <el-icon :size="12"><Close /></el-icon>
              </span>
              </li>
              <li class="search-history-item" v-if="searchHistoryList.length == 0">
                暂无数据
              </li>
            </ul>
            <p @click="deleteAllHistory">清除所有历史</p>
          </div>
        </div>

        <el-button type="primary" @click="goToSearch(item)">搜索</el-button>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.tablist-search-wrapper {
  .el-input {
    width: 400px;
    height: 40px;
    // margin-right: 10px;
  }
  .el-input__inner {
    height: 40px;
    border-style: none;
  }
  .el-button {
    height: 40px;
    margin-left: 10px;
  }
}
</style>
<style lang="scss" scoped>
.tablist-search-wrapper {
  width: 100%;
}
.search-type-list-box {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5) !important;
}
.search-type-list {
  width: 500px;
  height: 50px;
  line-height: 50px;
  display: flex;
  align-items: center;
  margin: 0 auto 0px;
  padding-left: 100px;
  color: #fff;
  p {
    margin-right: 30px;
  }
  .active-cur-tag {
    color: rgb(0, 242, 255);
  }
}
.option-item-search {
  flex-shrink: 0;
  position: relative;
  margin-right: 10px;
  .current-search-type {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 4px;
    display: block;
  }
  ul {
    position: absolute;
    bottom: 0;
    left: 0;
    display: grid;
    z-index: 99;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    background-color: #fff;
    transform: translateY(110%);
    li {
      width: 100px;
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border: 1px solid #ccc;
      &:hover {
        border: 5px solid #aaa;
        box-sizing: border-box;
      }
      img {
        display: block;
        width: 30px;
        height: 30px;
        margin: 0 auto 10px;
      }
      p {
        font-size: 14px;
        color: #333;
        margin: 0 auto;
      }
    }
  }
}
.search {
  width: 500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.input-search {
  position: relative;
  .search-history-box {
    padding: 10px 10px 20px;
    position: absolute;
    left: 0;
    top: 110%;
    width: 100%;
    min-height: 200px;
    border-radius: 0 0 10px 10px;
    background: rgba(0, 0, 0, 0.5) !important;
    color: #ccc;
    box-sizing: border-box;
    font-size: 12px;
    ul{
      padding-bottom: 20px;
      li{
        font-size: 12px;
        line-height: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    p {
      position: absolute;
      bottom: 20px;
      left: 10px;
      color: #ff5500;
      cursor: pointer;
    }
  }
}
</style>
